<template>
	<view class="spaceDetail">
		<!-- <u-navbar :title="spaceDetail.spaceName" 
			class="navHeader" :class="[navbarStatus ? null : 'noFixed']"
			title-size="36" title-color="#333333"></u-navbar> -->
		<!-- height: (navigationBarHeight + statusBarHeight) * 2 + 'rpx' -->
		<!-- :style="{
				paddingTop: (navigationBarHeight + statusBarHeight + (statusBarHeight / 2)) + 'px'
			}" -->
		<view class="space_userinfo">
			<u-navbar :title="spaceDetail.spaceName"
				class="navHeader" :class="[navbarStatus ? null : 'noFixed']"
				title-size="36" title-color="#333333" back-icon-size="40"></u-navbar>
			<view class="space_userBg">
				<image v-if="spaceDetail.spaceImgUrl" :src="spaceDetail.spaceImgUrl" mode=""></image>
			</view>
			<view class="user-container">
				<view class="user-img">
					<image v-if="spaceDetail.spaceImgUrl" :src="spaceDetail.spaceImgUrl" mode=""></image>
				</view>
				<view class="user-baseinfo">
					<view class="username">
						<text>{{ spaceDetail.spaceName || '' }}</text>
						<button type="default" class="invite-btn" @click="onShareFriend" open-type="share">邀请成员</button>
					</view>
					<view class="swiper-bottom">
						<view class="swiper-option">
							<u-icon :name="iconLook" :size="32"></u-icon>
							<view class="grid-text">{{ spaceDetail.browseCount }}</view>
						</view>
						<view class="swiper-option">
							<u-icon :name="iconBubbles" :size="32"></u-icon>
							<view class="grid-text">{{ spaceDetail.bubbleCount }}</view>
						</view>
						<view class="swiper-option">
							<u-icon :name="iconFire" :size="32"></u-icon>
							<view class="grid-text">{{ spaceDetail.vitalityValue }}</view>
						</view>
					</view>
					<view class="b-message">
						<view class="brief" @click="onLookBrief">
							{{ spaceDetail.spaceBriefIntroduction  || ''}}
						</view>
						<u-icon name="arrow-right" color="#333333" size="32"></u-icon>
					</view>
					<view class="tags_list" v-if="spaceDetail.labelList && spaceDetail.labelList.length > 0">
						<u-tag shape="circle" v-for="(label, index) in spaceDetail.labelList" :key="index" :text="label" bg-color="#FFFAD3" border-color="#FFFAD3" color="#FF7B02" />
					</view>
				</view>
			</view>
			<view class="swiper-address">
				<view class="address-text">
					<view class="icon_address"></view>
					<text class="address_text">{{ spaceDetail.address }}</text>
				</view>
				<view class="address-length">{{ distanceM | distance }}</view>
			</view>
		</view>
		
		<view class="space_content">
			<u-sticky :offset-top="(44 + statusBarHeight) * 2">
				<view class="home-tabs">
					<view class="tab-item" :class="[pageInfo.option == 0 ? 'active' : null]" @click="onTabChange(0)">
						热门<image src="../../static/header/icon_sub.png" mode=""></image>
					</view>
					<view class="tab-item" :class="[pageInfo.option == 1 ? 'active' : null]" @click="onTabChange(1)">
						最新<image src="../../static/header/icon_sub.png" mode=""></image>
					</view>
				</view>
			</u-sticky>
			<view class="detail-section" v-if="bubbleStatus">
				<detail-block v-for="(item, index) in bubbleTable" :key="index" :item="item" @updateStatus="updateStatus"></detail-block>
			</view>
			<view style="padding-top: 32rpx;" class="detail-section" v-else>
				<empty type="empty" :showButton="false"></empty>
			</view>
		</view>
		
		<view class="release" v-show="createStatus" @click="onRelease">发布</view>
		
		<u-modal v-model="showRelease" :show-cancel-button="true" @confirm="onReleaseConfirm" confirm-color="#FED034" border-radius="24">
			<view class="slot-content">
                每次发布泡泡，金币
				<text style="color: #FF6969;">-3</text>
                 ，活力值
				<text style="color: #FED034;">+3</text>
			</view>
		</u-modal>
		<u-modal v-model="showCoin" :show-title="false" confirm-color="#FED034" content="您的可用金币数量不足，无法发布泡泡！"></u-modal>
		<u-popup v-model="showBrief" mode="center" closeable width="640rpx" border-radius="16" close-icon-size="40">
		    <view class="explain-content">
		        <view class="title">空间简介</view>
		        <view class="content">
		    		{{ spaceDetail.spaceBriefIntroduction }}
		        </view>
		    </view>
		</u-popup>
		<u-modal v-model="showAuth" :show-title="true" @confirm="authConfirm" confirm-color="#FED034" content="私密空间权可通过成员邀请方式进入"></u-modal>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import detailBlock from '../tabbar/components/detail-block.vue'
import empty from '../../components/empty.vue'
export default {
	name: 'spaceDetail',
	components: {
		detailBlock,
		empty
	},
	data() {
		return {
			spaceId: null,
			showBrief: false,
			distanceM: 0,
			current: 0,
			iconLook: require('../../static/header/icon_eye_black.png'),
			iconBubbles: require('../../static/header/icon_bubbles_black.png'),
			iconFire: require('../../static/header/icon_fire_active.png'),
			navbarStatus: false,
			showRelease: false,
			showCoin: false,
			spaceDetail: {},
			bubbleTable: [],
			bubbleStatus: true,
			pageInfo: {
				option: 0,
				currentPage: 1,
				totalPage: 10
			},
			createStatus: true,
			showAuth: false
		}
	},
	onPageScroll(res) {
		if(res.scrollTop >= 186 - (this.navigationBarHeight + this.statusBarHeight) * 2 ) {
			this.navbarStatus = true
		} else {
			this.navbarStatus = false
		}
	},
	onLoad(options) {
		this.spaceId = options.id
		this.pageInfo.spaceId = options.id
		this.distanceM = options.distanceM || 0
		this.__init()
	},
	onShow() {
		this.bubbleTable = []
		this.bubbleStatus = true
		this.bubbleList() // 获取空间下的泡泡
	},
	onReachBottom() {
		let pageInfo = this.pageInfo
		if(pageInfo.currentPage < pageInfo.totalPage) {
			pageInfo.currentPage = pageInfo.currentPage + 1
			this.bubbleList()
		}
	},
	methods: {
		__init() {
			uni.showLoading()
			this.$u.get('/paopao/mini/space/querySpaceDetail', { id: this.spaceId }).then(res => {
				uni.hideLoading()
				this.spaceDetail = res
				if(res && !res.isCanShow) {
					this.showAuth = true
				}
			})
		},
		authConfirm() {
			uni.navigateBack()
		},
		onShareFriend() {
			let spaceDetail = this.spaceDetail
			uni.share({  
				provider: "weixin",  
				scene: 'WXSceneSession',    // WXSceneSession/WXSenceTimeline/WXSceneFavorite  
				imageUrl: spaceDetail.spaceImgUrl,  
				type: 5,  
				title: spaceDetail.spaceName,
				summary: spaceDetail.spaceBriefIntroduction,
				miniProgram: 'wx2959a675e140ffec',
				success: (res) => {  
					console.log("weixin == success:" + JSON.stringify(res));  
				},  
				fail: (err) => {  
					console.log("weixin == fail:" + JSON.stringify(err));  
				}  
			})
		},
		updateStatus(val) {
			this.createStatus = !val
		},
		bubbleList() {
			this.pageInfo.spaceId = this.spaceId
			uni.showLoading()
			this.$u.get('/paopao/mini/space/queryPaoPaoList', this.pageInfo).then(res => {
				uni.hideLoading()
				if(res && res.status == -1) { return }
				this.bubbleTable.push(...res.items)
				this.pageInfo.totalPage = res.totalPage
				console.log(this.bubbleTable, this.bubbleTable.length)
				if(this.bubbleTable.length > 0) {
					this.bubbleStatus = true
				} else {
					this.bubbleStatus = false
				}
			})
		},
		onTabChange(num) {
			this.pageInfo.option = num
			this.bubbleStatus = true
			this.bubbleTable = []
			this.bubbleList()
		},
		onLookBrief() {
			this.showBrief = true
		},
		onRelease() {
			// 需要先判断金币余额是否足够
			if(this.userInfo.availableGoldCoinCount < 3) {
				this.showCoin = true
				return
			}
			// NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs
			let _id = ['NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs']
			
			uni.requestSubscribeMessage({
			    tmplIds: _id,
			    success: (res) => {
			        let templateId = _id.filter(i => res[i] === 'accept');
			        if( templateId.length ) {
						this.showRelease = true
			        }
			    },
			    fail: (err) => {
			        console.log(err,'requestSubscribeMessage err')
			        if (err.errCode === 20004) {
			            // 20004:用户关闭了主开关，无法进行订阅,引导开启
			        }
			    }
			})
		},
		onReleaseConfirm() {
			this.showRelease = false
			this.$u.route('/pages/papaw/papaw', {
				spaceId: this.spaceId
			})
		}
	},
	computed: {
		...mapState(["addressInfo", "userInfo"]),
		statusBarHeight(){
			return this.systemInfo.statusBarHeight - 4
		},
		navigationBarHeight(){
			return this.systemInfo.navigationBarHeight;
		},
		customWidth(){
			return this.systemInfo.custom.width;
		},
		customHeight(){
			return this.systemInfo.custom.height;
		},
		//小程序右侧需要留出气泡空间
		headerPaddingRight(){
			// #ifndef MP
			return 0;
			// #endif
			// #ifdef MP
			return this.customWidth + 20;
			// #endif
		},
	},
}
</script>

<style lang="less" scoped>
@import url("./spaceDetail.less");
</style>
